<template>
  <!-- 头部 -->
  <div class="lesson">
    <div class="header">
      <div></div>
      <h2>特色课程</h2>
      <div class="search" @click="gosearch">
        <img src="@/assets/images/search.png"/>
      </div>   
    </div>

    <!-- 下拉框 -->
    <div class="course-fitler">

      <van-dropdown-menu>
        <!-- 分类 -->
        <van-dropdown-item :title="title1" ref="kinds">
          <div class="parent-box">
            <div class="tm-kind" v-for="(item,index) in attrclassify" :key="item.id">
              <p>{{item.name}}</p>
              <div class="tmk-item">
                <div class="small" v-for="item1 in item.child" :key="item1.id">
                  {{item1.name}}
                </div>
              </div>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="seach-btn">
            <van-button type="default">重置</van-button>
            <van-button type="warning">确定</van-button>
          </div>
        </van-dropdown-item>

        <!-- 排序 -->
        <van-dropdown-item title="排序" ref="sort">
          <ul class="course-sort">
            <li
              :class="order_by == item.value ? 'active':''"
              v-for="item in option2"
              :key="item.value"
              @click="selectType('sort',item.value)"
            >{{item.text}}</li>
          </ul>
        </van-dropdown-item>

        <!-- 筛选  -->
        <van-dropdown-item :title="title3" ref="as">
          <div class="filter-box">
            <div class="tm-kind">
              <div class="tmk-item">
                <div class="small" v-for="(item,key) in option3" :key="item.type" @click="select(item.type)">
                  {{item.value}}
                </div>
              </div>
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>

      <!-- 筛选内容 -->
   <div v-for="item in arr" :index="item.id" @click="golessondetailyy(item.id)"> 
      <p class="title">{{item.title}}</p>
  
      <div class="lesson">
        <div><span></span>03月25日 18:00 ~ 03月31日</div>
        <div>共{{item.total_periods}}课时</div>
      </div>
  
      <div class="teacher" v-for="(item1,index) in item.teachers_list" :key="item1.id">
        <img class="img" :src="item1.teacher_avatar" alt="">
        <span class="TN">{{item1.teacher_name}}</span>
      </div>
  
      <div class="li-foot">
        <span> {{item.total_periods}}人报名</span>
        <span v-if='item.price!=0'>{{item.underlined_price}}</span>
        <span v-if='item.price==0'>免费</span>
      </div>
  </div>
 </div>

    <!-- 下拉刷新-->
   <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad">

    <div v-for="item in pulllist" :index="item.id" @click="golessondetailyy(item.id)"> 
      <p class="title">{{item.title}}</p>
  
      <div class="lesson">
        <div><span></span>03月25日 18:00 ~ 03月31日</div>
        <div>共{{item.total_periods}}课时</div>
      </div>
  
      <div class="teacher" v-for="(item1,index) in item.teachers_list" :key="item1.id">
        <img class="img" :src="item1.teacher_avatar" alt="">
        <span class="TN">{{item1.teacher_name}}</span>
      </div>
  
      <div class="li-foot">
        <span> {{item.total_periods}}人报名</span>
        <span v-if='item.price!=0'>{{item.underlined_price}}</span>
        <span v-if='item.price==0'>免费</span>
      </div>
  </div>
  </van-list>
    <Zhezhao></Zhezhao>
    <Footer></Footer>

  </div>
</template>

<script>
  import { DropdownMenu, DropdownItem } from 'vant';
  import { Icon } from 'vant';
  import Zhezhao from "./zhezhao";
  import Footer from "./Footer";
  import { sort,goodat } from "../api/index";
  import { Button } from 'vant';
  import axios from "axios"
  import { List } from 'vant';

  export default {
    name: 'Lesson',
    title: "",
    components: {
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [ Button.name]:Button,
      [List.name]:List,
      Zhezhao,
      Footer,
    },
    data() {
      return {
          //中间
         course: [],//课程页数据
        list: [],
        loading: false,
        finished: false,
         page:1,
        coursenum:0,//课程页的条数
        pulllist:[],
       
       order_by:0,
       list: [],
       loading: false,
       finished: false,
       course_type:0,
       arr:[],

        title: {
          name: "特色课"
        },
        attrclassify: [],
        title1: "分类",
        option2: [
          { text: "综合排序", value: 0 },
          { text: "最新", value: 1 },
          { text: "最热", value: 2 },
          { text: "价格从低到高", value: 3 },
          { text: "价格从高到低", value: 4 }
        ],
        
        title2: "排序",
        option3: [
          { type: 0, value: "全部" },
          { type: 2, value: "大班课" },
          { type: 3, value: "小班课" },
          { type: 4, value: "公开课" },
          { type: 5, value: "点播课" },
          { type: 7, value: "面授课" },
          { type: 8, value: "音频课" },
          { type: 9, value: "系统课" },
          { type: 10, value: "图文课" },
          { type: 11, value: "会员课" }
        ],
        title3: "筛选",
      }
    },
    mounted() {
      this.pullsort()
      this.select()
      this.selectType()
      this.begoodat();
      // this.list();
    },
    methods: {

      //中间数据
       async begoodat(){
          const res =await goodat(this.page)
          // Console.log(res)
          this.course=res.data.list;
          this.coursenum = res.data.total;//获取课程数据条数
        },
  
    onLoad() {//下拉刷新
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i <this.course.length; i++) {//渲染来的所有数据
          this.list.push(this.course[i]);//数据中的每一条放入list
          this.pulllist=this.list
          // console.log(this.pulllist)
          // console.log(i)//当前添加数据的下标
          if(i==this.pulllist.length-1){//当前添加的数据下标和数组中的最后一条数据下标等同是
              this.page++;
              if(this.page<=5){
                this.begoodat();
              }
          }
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.pulllist.length >=this.coursenum) {
          this.finished = true;
        }
      }, 1000);
    },
        
        //跳转课程详情页
     golessondetailyy(id) {
       // alert("id是:"+id)
       this.$router.push({
         name: "Lessondetailyy",
         query: {
           ID: id
         }
       })
     },

      //获取下拉列表数据
      async pullsort() {
        const res = await sort()
        // console.log(res)
        this.attrclassify = res.data.attrclassify;
        // console.log(this.attrclassify)
      },
      gosearch(){
         this.$router.push("/gosearch")
      },
      
      //排序
      selectType(name,val){
        //  this.$refs.sort.toggle()
        //  console.log(name);
        //  console.log(val)
         if(name=="sort"){
            this.order_by=val;
            this.limit=100;
            this.selectType();
         }
      },
  
      //筛选
      select(val){
        //  console.log(val)
         this.course_type=val;
         axios.get(`https://test.365msmk.com/api/app/courseBasis?page=1&limit=10&course_type=${this.course_type}`).then(res=>{
             this.arr=res.data.data.list
              console.log(this.arr)
              // this.$refs.as.toggle();//弹框消失
              
         })
      },
       //筛选前调用原来数据
      // list(){
      //   axios.get(`https://test.365msmk.com/api/app/courseBasis?page=1&limit=10&course_type`).then(res=>{
      //        this.arr=res.data.data.list
      //    }) 
      // }
    },
   

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .active{
    color:orange;
  }
   .title {
    line-height: 50px;
    font-size: 16px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #efefef;
  }
   .img {
    width: 40px;
    height: 40px;
    border-radius: 50%;

  }
    .teacher {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: left;
    align-items: center;
    display: inline-block;
    margin: 3px;
  }
  .TN {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .li-foot {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    widows: 100%;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #eeeeee;
  }
  /* .lesson {
    display: flex;
    justify-content: space-between;
  } */

  .header {
    height:50px;
    width:100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
  }
  .search img{
    width: 20px;
    height: 20px;
    line-height: 48px;
    margin-right:10px;
  }
  .tm-kind {
    width:100%;
    height:100px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
  p {
    display: flex;
    justify-content: left;
    font-size: 16px;
    font-weight:bold;
    color: rgba(89, 89, 89, 1);
  }
  .tmk-item{
    width:100%;
    height:100px;
    /* padding-bottom: 20px; */
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
  }
  .small{
        margin: 2px;
        width:22%;
        height: 30px; 
        border-radius: 6px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #646464;
        text-align: center;
        line-height: 30px;
        overflow: hidden; 
        background: rgba(245, 245, 245, 1);
  }
   .course-sort {
    background: #fff;
  }
  li {
    height:45px;
    text-align: center;
    line-height:45px;
    font-size:16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(89, 89, 89, 1);
    border-bottom: 1px solid #f5f5f5;
  }
  .seach-btn {
      padding: 30px 0px;
      display: flex;
      justify-content:center;
      }
    
</style>